// store.js - 全局状态管理文件
// 使用 @vueuse/core 提供的 createGlobalState 和 useStorage 来管理全局状态
import { createGlobalState, useStorage } from '@vueuse/core'

// 创建全局状态管理
export const useThemeState = createGlobalState(
  () => {
    /*==================== vueuse案例 ====================*/
    // // state
    // const count = ref(0)

    // // getters
    // const doubleCount = computed(() => count.value * 2)

    // // actions
    // function increment() {
    //   count.value++
    // }

    // return { count, doubleCount, increment }

    // 使用 useStorage 创建持久化的主题状态
    // 参数1: 'theme' - 存储的键名
    // 参数2: 'dark' - 默认值
    // 参数3: localStorage - 存储方式
    const theme = useStorage('theme', 'dark', localStorage)
    
    // 根据当前时间自动设置主题的函数
    const setThemeByTime = () => {
      // 获取当前小时数（0-23）
      const hour = new Date().getHours()
      // 判断是否为白天时间（6:00-18:00）
      const isDaytime = hour >= 6 && hour < 18
      // 根据时间设置主题：白天为light，晚上为dark
      theme.value = isDaytime ? 'light' : 'dark'
      // 将主题应用到body元素
      document.body.setAttribute('data-theme', theme.value)
    }

    // 页面加载时初始化主题
    setThemeByTime()

    // 手动切换主题的函数
    function toggleTheme() {
      // 在light和dark之间切换
      theme.value = theme.value === 'light' ? 'dark' : 'light'
      // 更新body的主题属性
      document.body.setAttribute('data-theme', theme.value)
    }

    // 设置定时器，每小时检查一次时间并更新主题
    // 参数1: setThemeByTime - 要执行的函数
    // 参数2: 60 * 60 * 1000 - 间隔时间（1小时，单位毫秒）
    setInterval(setThemeByTime, 60 * 60 * 1000)

    // 返回主题状态和切换函数
    return { theme, toggleTheme }
  }
)

